<template>
  <div class="confirm-page">
    <!-- 状态栏 -->
    <div class="status-bar" v-if="false">
      <span class="time">17:44</span>
      <div class="status-icons">
        <span class="icon">VPN</span>
        <span class="icon">📱</span>
        <span class="icon">🏠</span>
        <span class="icon">🔋</span>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <button class="back-btn" @click="goBack">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
      </button>
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <!-- 警告信息 -->
      <div class="warning-section" v-if="false">
        <div class="warning-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
            <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </div>
        <div class="warning-text">
          <div class="warning-title">TRX 余额不足以支付网络费用</div>
          <div class="warning-subtitle">补充 TRX</div>
        </div>
      </div>

      <!-- 发送图标和金额 -->
      <div class="send-section">
        <!-- <div class="send-icon">
          <div class="arrow-up"></div>
        </div> -->
        <img src="/public/send.png" style="width: 80px;height: 80px;" alt="">
        <div class="send-label">发送</div>
        <div class="send-amount">
          -1 <span class="currency">USDT</span>
          <span class="usd-amount">$1</span>
        </div>
      </div>
      <!-- line -->
      <div style="  border-top: 1px solid #E9E9E9;"></div>
      <!-- 交易详情 -->
      <div class="details-section">
        <div class="detail-item">
          <div class="detail-label">TRON 网络费用</div>
          <div class="detail-value">
            {{ walletState.networkFee.amount }} {{ walletState.networkFee.currency }}
            (${{ walletState.networkFee.usdValue }})
          </div>
        </div>

        <div class="detail-item">
          <div class="detail-label">发送地址</div>
          <div class="detail-value address">
            {{ walletState.fromAddress }}
            <button class="copy-btn" @click="copyAddress(walletState.fromAddress)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"
                  fill="none" />
                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"
                  fill="none" />
              </svg>
            </button>
          </div>
          <div class="detail-sublabel">{{ walletState.fromLabel }}</div>
        </div>

        <div class="detail-item">
          <div class="detail-label">接收地址</div>
          <div class="detail-value address">
            {{ walletState.fromAddress }}
            <button class="copy-btn" @click="copyAddress(walletState.fromAddress)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"
                  fill="none" />
                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"
                  fill="none" />
              </svg>
            </button>
          </div>

        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-section">
      <div class="button-group">
        <button class="reject-btn" @click="rejectTransaction">
          拒绝
        </button>
        <button class="confirm-btn" @click="confirmTransaction" :disabled="!receivingAddress">
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const walletState = inject('walletState')



const receivingAddress = ref('')
const isInputFocused = ref(false)

const goBack = () => {
  router.go(-1)
}

const copyAddress = async (address: string) => {
  try {
    await navigator.clipboard.writeText(address)
    alert('地址已复制')
  } catch (err) {
    console.error('复制失败:', err)
  }
}

const rejectTransaction = () => {
  router.push('/address')
}

const confirmTransaction = () => {
  if (receivingAddress.value) {
    alert('交易已提交')
    router.push('/address')
  }
}
</script>

<style scoped>
.confirm-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.status-icons {
  display: flex;
  gap: 8px;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
}

.back-btn {
  background: none;
  border: none;
  /* padding: 8px; */
  cursor: pointer;
  color: #333;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.back-btn:hover {
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
  /* padding: 20px; */
}

.warning-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 12px;
  margin-bottom: 32px;
}

.warning-icon {
  color: #856404;
  flex-shrink: 0;
}

.warning-text {
  flex: 1;
}

.warning-title {
  font-size: 16px;
  font-weight: 600;
  color: #856404;
  margin-bottom: 4px;
}

.warning-subtitle {
  font-size: 14px;
  color: #6c5ce7;
  font-weight: 500;
}

.send-section {
  margin: 0 20px;
  text-align: center;
  margin-bottom: 40px;
}

.send-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #fff;
}

.send-label {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 46px;
}

.send-amount {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.currency {
  /* font-size: 18px; */
  color: #999;
  font-weight: 400;
}

.usd-amount {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}

.details-section {
  margin: 0 20px;
  background: #fff;
  /* border-radius: 16px; */
  padding: 20px;
  margin-bottom: 20px;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
}

.detail-item {
  margin-bottom: 24px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 14px;
  /* color: #666; */
  color: #AEAEAE;
  margin-bottom: 8px;
  font-weight: 500;
}

.detail-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.detail-value.address {
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-all;
}

.copy-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #666;
  border-radius: 4px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.copy-btn:hover {
  background-color: #f0f0f0;
}

.detail-sublabel {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.address-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  transition: all 0.2s;
}

.address-input:focus {
  outline: none;
  border-color: #007AFF;
  background: #fff;
}

.bottom-section {
  padding: 20px;
  background: #fff;
  /* border-top: 1px solid #f0f0f0; */
}

.button-group {
  display: flex;
  gap: 12px;
}

.reject-btn {
  flex: 1;
  padding: 16px;
  background: #fff;
  color: #666;
  border: 1px solid #B5B5B5;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.reject-btn:hover {
  background: #fff;
  border-color: #dee2e6;
}

.confirm-btn {
  flex: 1;
  padding: 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-btn:hover {
  background: #333;
}

.confirm-btn:disabled {
  background: #FAFAFA;
  cursor: not-allowed;
  color: #B2B2B2;
}

.confirm-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.reject-btn:active {
  transform: scale(0.98);
}
</style>